<template>
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item selected">
          <span
            class="v-link selected dark"
            :onclick="'javascript:window.location=\'/hospital/'+schedule.hoscode+'\''"
          >预约挂号 </span>
        </div>
        <div class="nav-item ">
          <span
            class="v-link clickable dark"
            :onclick="'javascript:window.location=\'/hospital/detail/'+schedule.hoscode+'\''"
          > 医院详情 </span>
        </div>
        <div class="nav-item">
          <span
            class="v-link clickable dark"
            :onclick="'javascript:window.location=\'/hospital/notice/'+schedule.hoscode+'\''"
          > 预约须知 </span>
        </div>
        <div class="nav-item "><span class="v-link clickable dark"> 停诊信息 </span>
        </div>
        <div class="nav-item "><span class="v-link clickable dark"> 查询/取消 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->
  
      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="hospital-order">
          <div class="header-wrapper">
            <div class="title mt20"> 确认挂号信息</div>
            <div>
              <div class="sub-title">
                <div class="block"></div>
                选择就诊人：
              </div>
              <div class="patient-wrapper">
                <div>
                  <div class="v-card clickable item ">
                    <div
                      class="inline"
                      v-for="(item,index) in patientList"
                      :key="item.id"
                      @click="selectPatient(index)"
                      style="margin-right: 10px;"
                    >
                      <!-- 选中 selected  未选中去掉selected-->
                      <div :class="activeIndex == index ? 'item-wrapper selected' : 'item-wrapper'">
                        <div>
                          <div class="item-title">{{ item.name }}</div>
                          <div>{{ item.param.certificatesTypeString }}</div>
                          <div>{{ item.certificatesNo }}</div>
                        </div>
                        <img
                          src="//img.114yygh.com/static/web/checked.png"
                          class="checked"
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item space add-patient v-card clickable">
                  <div class="">
                    <div
                      class="item-add-wrapper"
                      @click="addPatient()"
                    > +
                      添加就诊人
                    </div>
                  </div>
                </div>
                <div
                  class="el-loading-mask"
                  style="display: none;"
                >
                  <div class="el-loading-spinner">
                    <svg
                      viewBox="25 25 50 50"
                      class="circular"
                    >
                      <circle
                        cx="50"
                        cy="50"
                        r="20"
                        fill="none"
                        class="path"
                      ></circle>
                    </svg>
                  </div>
                </div>
              </div>
              <!-- 就诊人，选中显示 -->
              <div
                class="sub-title"
                v-if="patientList.length > 0"
              >
                <div class="block"></div>
                选择就诊卡： <span class="card-tips"><span class="iconfont"></span> 如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span>
              </div>
  
              <el-card
                class="patient-card"
                shadow="always"
                v-if="patientList.length > 0"
              >
                <div
                  slot="header"
                  class="clearfix"
                >
                  <div><span class="name"> {{ patient.name }} {{ patient.certificatesNo }} 居民身份证</span></div>
                </div>
                <div class="card SELF_PAY_CARD">
                  <div class="info"><span class="type">{{ patient.isInsure == 0 ? '自费' : '医保'}}</span><span class="card-no">{{ patient.certificatesNo }}</span><span class="card-view">居民身份证</span></div>
                  <span class="operate"></span>
                </div>
                <div class="card">
                  <div class="text bind-card"></div>
                </div>
              </el-card>
  
              <div class="sub-title">
                <div class="block"></div>
                挂号信息
              </div>
              <div class="content-wrapper">
                <el-form ref="form">
                  <el-form-item label="就诊日期：">
                    <div class="content"><span>{{ schedule.workDate }} {{ schedule.param.dayOfWeek }} {{ schedule.workTime == 0 ? '上午' : '下午' }}</span></div>
                  </el-form-item>
                  <el-form-item label="就诊医院：">
                    <div class="content"><span>{{ schedule.param.hosname }} </span></div>
                  </el-form-item>
                  <el-form-item label="就诊科室：">
                    <div class="content"><span>{{ schedule.param.depname }} </span></div>
                  </el-form-item>
                  <el-form-item label="医生姓名：">
                    <div class="content"><span>{{ schedule.docname }} </span></div>
                  </el-form-item>
                  <el-form-item label="医生职称：">
                    <div class="content"><span>{{ schedule.title }} </span></div>
                  </el-form-item>
                  <el-form-item label="医生专长：">
                    <div class="content"><span>{{ schedule.skill }}</span></div>
                  </el-form-item>
                  <el-form-item label="医师服务费：">
                    <div class="content">
                      <div class="fee">{{ schedule.amount }}元</div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
  
              <!-- 用户信息 #start-->
              <div>
                <div class="sub-title">
                  <div class="block"></div>
                  用户信息
                </div>
                <div class="content-wrapper">
                  <el-form
                    ref="form"
                    :model="form"
                  >
                    <el-form-item
                      class="form-item"
                      label="就诊人手机号："
                    >
                      {{ patient.phone }}
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 用户信息 #end -->
              <div class="bottom-wrapper">
                <div class="button-wrapper">
                  <div
                    class="v-button"
                    @click="submitOrder()"
                  >{{ submitBnt }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
  </template>
  
  <script>
  import '~/assets/css/hospital_personal.css'
  import '~/assets/css/hospital.css'
  
  import hospitalApi from '@/api/hosp'
  import patientApi from '@/api/patient'
  import orderInfoApi from '@/api/orderInfo'
  export default {
  
    data() {
      return {
        scheduleId: null,
        schedule: {
          param: {}
        },
        patientList: [],
        patient: {},
  
        activeIndex: 0,
        submitBnt: '确认挂号'
      }
    },
  
    created() {
      this.scheduleId = this.$route.query.scheduleId
      //window.alert(this.scheduleId);
      this.init()
    },
  
    methods: {
      init() {
        this.getSchedule()
  
        this.findPatientList()
      },
  
      getSchedule() {
        hospitalApi.getSchedule(this.scheduleId).then(response => {
          this.schedule = response.data
        })
      },
  
      findPatientList() {
        patientApi.findList().then(response => {
          this.patientList = response.data
          if (this.patientList.length > 0) {
            this.patient = this.patientList[0]
          }
        })
      },
  
      selectPatient(index) {
        this.activeIndex = index;
        this.patient = this.patientList[index]
      },
      //预约下单
      submitOrder() {
        if (this.patient.id == null) {
          this.$message.error('请选择就诊人')
          return
        }
        // 防止重复提交
        if (this.submitBnt == '正在提交...') {
          this.$message.error('重复提交')
          return
        }
  
        this.submitBnt = '正在提交...'
        orderInfoApi.submitOrder(this.scheduleId, this.patient.id).then(response => {
  
          let orderId = response.data
          //window.alert(orderId);
          window.location.href = '/order/show?orderId='+orderId
        }).catch(e => {
          this.submitBnt = '确认挂号'
        })

      },
  
      addPatient() {
        window.location.href = '/patient/add'
      }
    }
  }
  </script>
  <style>
  .hospital-order .header-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .hospital-order .sub-title {
    letter-spacing: 1px;
    color: #999;
    margin-top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .hospital-order .content-wrapper .content {
    color: #333;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .hospital-order .content-wrapper {
    margin-left: 140px;
    margin-top: 20px;
  }
  </style>
  